
<template>
  <div class="cityPost-detail">
    <van-nav-bar
        title="城市驿站"
        left-text="返回" 
        left-arrow
        @click-left="onClickLeft"  
    />
    <div v-if="!isService">
        <div class="title">
        <h3>申请城市驿站合作伙伴</h3>
        </div>  
        <div class="info">   
            <van-field v-model="form.true_name" label="真实姓名" placeholder="请输入姓名"/> 
            <van-field v-model="form.phone" type="tel" label="手机号"  placeholder="请输入手机号"/> 
            <van-field v-model="form.address" type="textarea" label="所在地"  placeholder="请输入所在地"/> 
            <van-field v-model="form.service" type="text" label="机构名称"  placeholder="机构名称"/> 
            <div class="radio_box">
                <div class="radio_title">付费方式</div>
                <van-radio-group v-model="form.pay_type" class="radio_group">
                    <!-- <van-radio :name="1" class="radio_item">微信支付</van-radio> -->
                    <van-radio :name="2" class="radio_item">线下支付</van-radio>
                </van-radio-group >
            </div>
            
        </div>
        <div class="submit">
            <van-button type="primary" block @click="postFormData">提交审核</van-button>
        </div>
    </div> 
    <div v-if="isService" class="success_join text-center">
        您已申请加入城市驿站
        <van-button type="info" block style="margin-top:40px" @click="onClickLeft">返 回</van-button>
    </div>

  </div>
</template>

<script>
import * as api from './../../api/api'
import nError from './../tpl/error'
import menuTpl from './../tpl/menuTpl'
  export default {
    data(){
        return{
            isService:false,
            form:{ 
                true_name:'',
                address:'',
                pay_type:2,
                phone:'',
                service:'', 
            }
        }
    },
    created(){ 
        this.checkService();
    },
    methods:{
        onClickLeft(){
            this.$router.go(-1);
        },
        regPhone(){
            let reg=/^1(3|4|5|7|8)\d{9}$/;
            if(!(reg.test(this.form.phone))){   
                return false; 
            } else{  
                return true;
            }
        },
        regForm(){
            if(this.form.true_name==''){
                this.$notify({ type: 'danger', message: '姓名不能为空' });
                return false;
            }else if(!this.regPhone()){
                this.$notify({ type: 'danger', message: '请输入正确的手机号' });
                return false;
            }else if(this.form.address==''){
                this.$notify({ type: 'danger', message: '地址不能为空' });
                return false;
            }else if(this.form.service==''){
                this.$notify({ type: 'danger', message: '机构名称不能为空' });
                return false;
            }else{
                return true;
            }
        },
        //审核
        postFormData(){
            let vm = this;
            if(this.regForm()){
                api.postServiceJoin(this.form).then(res=>{
                    if(res.data.code==200){ 
                        vm.isService=true;
                    }
                })
            } 
        },
        //检查
        checkService(){
            let vm = this;
            api.fetchServiceState().then(res=>{
                if(res.data.code==200){ 
                    vm.isService=res.data.data;
                }
            })
        },
    },
    components:{
    }

  }
</script>

<style scoped lang="scss">
  .cityPost-detail{
    width: 100%;
    height: 100%;

    /* 标题*/
    .title{
      border-bottom: #dee3de solid 1px;

      h3{
        font-size: .52rem;
        padding: .4rem 0;
        text-align: center;
      }
    }

    /* 信息*/
    .info{
        background: #fff; 
        .radio_box{
            position: relative;
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            box-sizing: border-box;
            width: 100%;
            padding: 10px 16px;
            overflow: hidden;
            color: #323233;
            font-size: 14px;
            line-height: 24px;
            background-color: #fff;
            .radio_title{
                -webkit-box-flex: 0;
                -webkit-flex: none;
                flex: none;
                width: 90px;
            }
            .radio_group{
                display: flex;
                .radio_item{
                    flex:1;
                    &:first-child{
                        margin-right: 10px;
                    }
                }
            }
        }
    }

    .submit{
        margin: 0 auto;
        margin-top: 1rem;
        width: 70%; 
      
    }
    .success_join{
        margin-top:5%;
        padding:.533333rem;
        font-size:.533333rem;
        color:#07C160;
        
    }
  }
</style>
